<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>消息管理界面</title>

    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto:600" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/responsive.css">
    <link rel="stylesheet" href="/static/css/bootstrap-table.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="top-bar">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-9">
                <a href="http://localhost:6021/index" class="img-circle"><img style="height: 75px;" src="/static/images/logo.jpg" alt=""></a>
                <div class="btn-group col-md-offset-10">
                    <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false" th:text="${managerName}">
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="http://localhost:7051/quitManager">注销</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid" style="margin: 50px 0 0 0;">
    <div id="leftNav" class="col-md-1">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a>消息管理</a></li>
            <!-- 这里的active属性就是使得所在的li的背景色变为蓝色-->
            <li><a href="http://localhost:6001/toMessage">查看预警消息</a></li>
            <li class="active"><a>图片管理</a></li>
            <!-- 这里的active属性就是使得所在的li的背景色变为蓝色-->
            <li><a href="http://localhost:6001/toUserImage">用户上传图片</a></li>
            <li><a href="http://localhost:6001/toCameraImage">摄像头图片</a></li>
            <li class="active"><a>摄像头管理</a></li>
            <!-- 这里的active属性就是使得所在的li的背景色变为蓝色-->
            <li><a href="http://localhost:6001/toCamera">摄像头信息</a></li>
            <li><a href="http://localhost:6001/toUploadCamera">设立摄像信息</a></li>
            <li class="active"><a>城市管理</a></li>
            <!-- 这里的active属性就是使得所在的li的背景色变为蓝色-->
            <li><a href="http://localhost:6001/toPosition">查看城市信息</a></li>
            <li class="active"><a>用户信息管理</a></li>
            <!-- 这里的active属性就是使得所在的li的背景色变为蓝色-->
            <li><a href="http://localhost:6001/toUserList">查看用户信息</a></li>
        </ul>
    </div>
    <div class="col-md-11">
        <table id="messageTable" style="table-layout: fixed;word-break: break-all;">
        </table>
    </div>
</div>
<footer class="panel-footer" style="width: 100%; overflow: hidden;">
    <div class="container">
        <div class="row footer-top" style="text-align: center;">
            <h1 class="col-md-4 col-md-offset-4">城市防涝检测系统</h1>
        </div>
        <hr style="border: 1px  solid #000000;">
        <div class="row" style="text-align: center;">
            <div class="col-md-6">
                <label>智能生活，一切为你！</label>
                <label>I can do everything for you!</label>
            </div>
            <div class="col-md-6">
                <ul>
                    <li>技术链接</li>
                    <li><a href="https://tensorflow.google.cn" style="color: gray;">tensorflow</a></li>
                    <li><a href="https://spring.io/projects/spring-boot" style=" color: gray;">spring-boot</a></li>
                    <li><a href="http://www.mybatis.cn/" style=" color: gray;">mybatis</a></li>
                    <li><a href="https://flask.palletsprojects.com/en/1.1.x/" style=" color: gray;">flask</a></li>

                </ul>
            </div>
        </div>
    </div>
</footer>
<!--模态框-->
<div class="modal fade modalIndex" id="messageModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">编辑预警信息</h4>
            </div>
            <div class="modal-body">
<!--                采用ajax提交表单-->
                <form class="form-horizontal" id="modalForm" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">预警id</label>
                        <div class="col-sm-9">
                            <input type="text" readonly="true" class="form-control" id="modal_messageId" name="modal_messageId">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">消息状态</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="modal_result" name="modal_result">
                                <option value="无积水">无积水</option>
                                <option value="积水">积水</option>
                                <option value="内涝">内涝</option>
                                <option value="冰雪">冰雪</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateMessageModal();" id="sava-edit-btn">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/scripts.js"></script>
<script src="/static/js/bootstrap-table.min.js"></script>
<script type="text/javascript">

    var $messageTable;
    $(function () {
        $messageTable = $('#messageTable').bootstrapTable({
            ajax: function (request) {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:7061/getAllMessage",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    data: '',
                    success: function (msg) {
                        request.success({
                            row: msg
                        });
                        $('#messageTable').bootstrapTable('load', msg);
                    },
                    error: function () {
                        alert("错误");
                    }
                });
            },

            toolbar: '#toolbar',
            singleSelect: true,
            clickToSelect: true,
            sortName: "province",
            sortOrder: "ASC",
            uniqueId: "messageId",
            pageSize: 15,
            pageNumber: 1,
            pageList: "[10, 25, 50, 100, All]",
            showToggle: true,
            showRefresh: true,
            showColumns: true,
            search: true,
            pagination: true,
            columns: [{
                field: 'imageUrl',
                title: '图片',
                align: 'center',
                formatter: imageFormatter,
                switchable: true,
                width: 150
            }, {
                field: 'messageName',
                title: '消息名称',
                align: 'center',
                switchable: true,
                width: 100
            }, {
                field: 'messageDescription',
                title: '消息描述',
                sortable: true,
                align: 'center',
                switchable: true,
                width: 100
            }, {
                field: 'coordinate',
                title: '坐标信息',
                align: 'center',
                formatter: coordinateFormatter,
                switchable: true,
                width: 100
            }, {
                field: 'province',
                title: '省份',
                align: 'center',
                formatter: provinceFormatter,
                sortable: true,
                switchable: true,
                width: 100
            }, {
                field: 'city',
                title: '城市',
                align: 'center',
                formatter: cityFormatter,
                switchable: true,
                width: 100
            }, {
                field: 'district',
                title: '区/县',
                align: 'center',
                formatter: districtFormatter,
                switchable: true,
                width: 100
            }, {
                field: 'createTime',
                title: '上传时间',
                align: 'center',
                sortable: true,
                switchable: true,
                width: 100
            }, {
                field: 'result',
                title: '消息状态',
                align: 'center',
                sortable: true,
                switchable: true,
                width: 100
            }, {
                field: 'creator',
                title: '创建者',
                align: 'center',
                switchable: true,
                width: 100
            }, {
                field: 'messageId',
                title: '消息id',
                align: 'center',
                switchable: true,
                visible: false,
                width: 200
            }, {
                field: 'ID',
                title: '操作',
                align: 'center',
                formatter: actionFormatter,
                valign: 'middle',
                width: 50
            },],
        });
    });

    function districtFormatter(value, row, index) {
        return value.district;
    }

    function cityFormatter(value, row, index) {
        return value.city;
    }

    function provinceFormatter(value, row, index) {
        return value.province;
    }

    function coordinateFormatter(value, row, index) {
        return value.latitude + "," + value.longitude;
    }

    // 图片字段格式化
    function imageFormatter(value) {
        return '<img style="width: 125px;height: 125px" src="' + value + '">'
    }

    //操作栏的格式化
    function actionFormatter(value, row, index) {
        var result = "";
        result += "<a href='javascript:' class='btn btn-xs blue' onclick=\"EditMessageById('" + row.messageId + "')\" title='编辑'>" +
            "<span class='glyphicon glyphicon-pencil'></span></a>";
        result += "<a href='javascript:' id='delete' class='btn btn-xs red' onclick=\"DeleteMessageByIds('" + row.messageId
            + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
        return result;
    }

    function EditMessageById(messageId) {
        var data = JSON.stringify($("#messageTable").bootstrapTable('getRowByUniqueId', messageId));
        data = eval("(" + data + ")");
        $("#modal_messageId").val(data.messageId);
        $("#modal_result").val(data.result);
        $("#messageModal").modal('show');
    }

    function DeleteMessageByIds(messageId) {
        if (!confirm("是否确认删除？")) {
            return;
        } else {
            $.ajax({
                url: "http://localhost:7061/deleteMessageByMessageId?messageId=" + messageId,
                type: "get",
                success: function () {
                    alert("删除成功");
                    $('#messageTable').bootstrapTable('refresh');
                },
                error: function () {
                    alert("删除失败");
                }
            });
        }
    }

    function updateMessageModal() {
        $.ajax({
            url: "http://localhost:7061/updateMessageByMessageId",
            data: $('#modalForm').serialize(),
            type: "POST",
            success: function () {
                alert("修改成功");
                $('#messageTable').bootstrapTable('refresh');
                $("#messageModal").modal('hide');
            },
            error: function () {
                alert("修改失败");
            }
        });
    }
</script>
</html>